<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-03-20 21:12:59
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-30 21:51:18
 * @Description: 
 * @FilePath: \graDesign\src\views\ProIntro\components\CEIntro.vue
-->
<template>
  <div class="CEContainer">
    <div class="left-English">
        <p>English:</p>
        <div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;This project is developed based on Springboot+Vue. Backend Java cooperates with Python's transformer/torch, DDPG, LSTM, SAC and TD3 to realize deep reinforcement learning of edge computing of the Internet of Things. Data transmission and page interaction of network protocols are carried out with the front-end Axios by providing a network interface. All source data are randomly simulated IoT device data. The project's in-depth study of the edge computing system of the IoT is achieved by evaluating the energy consumption, task upload and task unloading of the IoT device.
            The key development technologies or frameworks proposed for this project include Springboot, Mybatis plus, Vue3, TypeScript, data visualization Echarts, and calling cloud based facial recognition interfaces.</p>
            <p><div style="color: red;">（1）Vue.js</div>Vue.js (pronounced/vju) ː/， Similar to "view", it is a progressive JavaScript framework used to build user interfaces. Unlike other massive frameworks, Vue is designed to be applied layer by layer from bottom to top. Its goal is to achieve responsive data binding and composite view components through the simplest possible API.
            The core library of Vue.js only focuses on the view layer, making it very easy to integrate with other libraries or existing projects. The goal of Vue.js is to achieve efficient data-driven and flexible component systems through a simple and understandable API. It has become one of the most popular frameworks in the field of front-end development. Whether building small projects or large enterprise level applications, Vue.js can provide efficient, flexible, and easy to maintain solutions.</p>
            <p><div style="color: red;">（2）Spring Boot</div>Spring Boot is an open-source Java framework that is based on the Spring framework and provides a series of tools for quickly building production level Spring applications. Spring Boot aims to simplify the process of building and developing Spring applications, enabling developers to build stable and scalable applications more quickly.
            Spring Boot reduces developer configuration work through the concept of automatic configuration and convention over configuration. It provides a large number of "starter" dependencies, which contain the libraries and components required to build specific types of applications, thereby simplifying dependency management. In addition, Spring Boot also provides embedded web servers (such as Tomcat, Jetty, or Undertow), allowing applications to run independently without the need to deploy to external containers.</p>
            <p><div style="color: red;">（3）TypeScript</div>TypeScript is a free and open-source programming language developed by Microsoft. It is a superset of JavaScript, meaning it extends the syntax of JavaScript and adds optional static types and class based object-oriented programming. TypeScript is designed for developing large-scale applications and can be translated into JavaScript code through a TypeScript compiler or Babel. It can run in any browser or Node.js environment that can run JavaScript.
            TypeScript enhances JavaScript's functionality through a type system, making code easier to maintain and improving the efficiency of developing large projects. Its typification feature allows developers to perform type checks during compilation, enabling them to detect errors before code execution, which helps reduce runtime errors and improve code quality.
            The suffix for TypeScript files is. ts (. ts,. tsx,. dts), while the suffix for JavaScript files is. js. When writing a TypeScript file, it will automatically compile into a JavaScript file. In addition, TypeScript is compatible with JavaScript, and any existing JavaScript program can work in the TypeScript environment without any changes.</p>
            <p><div style="color: red;">（4）MyBatis-Plus</div>MyBatis-Plus(MP for short) is an enhancement tool for MyBatis, which only adds enhancements without making changes to MyBatis, aiming to simplify development and improve efficiency. MyBatis Plus supports all native features of MyBatis, so introducing MyBatis Plus will not have any impact on the existing MyBatis architecture. This tool particularly simplifies CRUD (create, read, update, delete) operations and injects single table SQL operations when loading XML configurations.
            When using MyBatis Plus, there is no need for any XML mapping files or interface method annotations, truly achieving zero implementation of the dao layer. MyBatis Plus supports any database that can perform CRUD operations using MyBatis, as well as databases that support standard SQL. This enables developers to perform database operations more quickly and easily, improving development efficiency.
            The vision of MyBatis Plus is to become the best partner for MyBatis, just like the 1P and 2P in Contra, where the efficiency doubles when paired with friends. In short, MyBatis Plus is a powerful and efficient tool that provides developers with a more convenient and faster database operation experience.</p>
            <p><div style="color: red;">（5）Node.js</div>Node.js is a JavaScript runtime environment based on the Chrome V8 engine. Node.js is not a programming language, but an environment that allows JavaScript code to run on the server side. Node.js essentially encapsulates the Chrome V8 engine, which executes JavaScript very quickly and performs very well, making Node.js very suitable for running data intensive real-time applications on distributed devices.
            Node.js adopts an event driven and non blocking I/O model, making it lightweight and efficient, making it very suitable for building data intensive real-time applications running on distributed devices. In addition, Node.js uses an efficient and lightweight event driven, non blocking I/O model, which enables it to handle high concurrency requests. This is also one of the reasons why it is widely used to build high-performance and scalable network applications.</p>
            <p><div style="color: red;">（6）ECharts</div>ECharts is a JavaScript based data visualization chart library that can run smoothly on PCs and mobile devices, and is compatible with the vast majority of current browsers. ECharts was initially open-source by the Baidu team and donated to the Apache Foundation in early 2018, becoming an ASF incubation level project. On January 26, 2021, the Apache Foundation announced the official graduation of the ECharts project.
            ECharts provides a series of intuitive, vivid, interactive, and highly personalized data visualization charts, including line charts, bar charts, scatter charts, pie charts, K-line charts, and 12 other types of charts. At the same time, it also provides 7 interactive components such as title, detail bubble, legend, value range, data area, timeline, toolbox, etc., supporting the linkage and mixed display of multiple charts and components.</p>
            <p><div style="color: red;">（7）Django</div>Django is an open-source Python-based web application framework that follows the MVC (Model-View-Controller) software design pattern, but actually uses the MTV (Model-Template-View) design pattern, that is, Model-Template-View. Django is designed to help developers quickly build efficient, scalable web applications. It offers a number of features and tools, including:1. ORM (Object-Relational Mapping): Django provides a powerful ORM tool that allows developers to define database models using Python code without having to write SQL directly. 2. Admin Interface: Django automatically generates a powerful admin interface that makes it easy for developers to manage their website's content and databases. 3. URL Mapping and Views: Django uses URL mapping to route requests to the appropriate view function, which is responsible for processing the request and returning a response. 4. Templating system: Django's templating system enables developers to dynamically generate web pages using HTML templates, separating logic from presentation. 5. Form Processing: Django offers convenient form processing features, including form validation and data cleansing, to enable developers to work with user-submitted data with ease. 6. Security: Django has strong security features, including protection against common web attacks (such as cross-site scripting attacks and SQL injection attacks), user authentication and authorization systems, and more.</p>

        </div>
    </div>
    <div class="center-ArrowRight flex_center">
        <BasicIcon icon-name="icon-Right" />
    </div>
    <div class="right-Chinese">
        <p>中文:</p>
        <div>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;本项目采用基于Springboot + Vue开发。后端Java配合Python的transformer/torch、DDPG、LSTM、SAC、TD3来实现物联网边缘计算的深度（deep）强化学习。通过提供网络接口与前端Axios进行网络协议的数据传输以及页面交互，所有来源数据均为随机模拟的物联网设备数据，通过评估物联网设备的能量消耗、任务上传及任务卸载来实现本项目对物联网边缘计算系统的深究。
            本项目拟采用的关键开发技术或框架包括：Springboot、Mybatis-plus、Vue3、TypeScript、数据可视化Echarts、 调用云端人脸识别接口。</p>
            <p><div style="color: red;">（1）Vue.js</div>Vue.js（读音 /vjuː/，类似于 "view"）是一个用于构建用户界面的渐进式 JavaScript 框架。与其他庞大的框架不同，Vue 被设计为自底向上逐层应用。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
            Vue.js 的核心库只关注视图层，使得它非常容易与其他库或已有项目整合。Vue.js 的目标是通过简单易懂的 API 实现高效的数据驱动和灵活的组件系统。它已经成为前端开发领域中最受欢迎的框架之一。无论是构建小型项目还是大型企业级应用，Vue.js 都能提供高效、灵活且易于维护的解决方案。</p>
            <p><div style="color: red;">（2）Spring Boot</div>Spring Boot是一个开源的Java框架，它基于Spring框架并提供了一系列快速构建生产级别Spring应用程序的工具。Spring Boot旨在简化Spring应用程序的搭建和开发过程，使开发者能够更快速地构建出稳定、可扩展的应用程序。
            Spring Boot通过自动配置和约定优于配置的理念，减少了开发者的配置工作。它提供了大量的“starter”依赖，这些依赖包含了构建特定类型应用程序所需的库和组件，从而简化了依赖管理。此外，Spring Boot还提供了内嵌的Web服务器（如Tomcat、Jetty或Undertow），使得应用程序可以独立地运行，无需部署到外部容器中。</p>
            <p><div style="color: red;">（3）TypeScript</div>TypeScript 是由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，意味着它扩展了JavaScript的语法，并添加了可选的静态类型和基于类的面向对象编程。TypeScript是设计用来开发大型应用的，通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器或Node.js等任何能运行JavaScript的环境中。
            TypeScript通过类型系统增强了JavaScript的功能，使得代码更加易于维护，并提高了开发大型项目的效率。其类型化特性使得开发者在编译期就能进行类型检查，从而在代码执行前就能发现错误，这有助于减少运行时错误并提高代码质量。
            TypeScript文件的后缀名是.ts（.ts，.tsx，.dts），而JavaScript文件的后缀名是.js。在编写TypeScript文件时，它会自动编译成JavaScript文件。此外，TypeScript与JavaScript是兼容的，任何现有的JavaScript程序都可以在不加改变的情况下在TypeScript环境下工作。</p>
            <p><div style="color: red;">（4）MyBatis-Plus</div>MyBatis-Plus（简称MP）是一个MyBatis的增强工具，它在MyBatis的基础上只做增强而不做改变，旨在简化开发、提高效率。MyBatis-Plus支持所有MyBatis原生的特性，因此引入MyBatis-Plus不会对现有的MyBatis构架产生任何影响。这个工具特别简化了CRUD（创建、读取、更新、删除）操作，启动加载XML配置时注入单表SQL操作。
            使用MyBatis-Plus时，甚至都不需要任何的XML映射文件或者接口方法注解，真正实现了dao层的零实现。任何可以使用MyBatis进行CRUD操作的数据库，以及支持标准SQL的数据库，MyBatis-Plus都支持。这使得开发者能够更快速、更简便地进行数据库操作，提高了开发效率。
            MyBatis-Plus的愿景是成为MyBatis最好的搭档，它就像魂斗罗中的1P、2P，基友搭配，效率翻倍。总之，MyBatis-Plus是一个强大而高效的工具，为开发者提供了更便捷、更快速的数据库操作体验。</p>
            <p><div style="color: red;">（5）Node.js</div>Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js不是一门编程语言，而是一个让JavaScript代码能够在服务器端运行的环境。Node.js实质上是对Chrome V8引擎进行了封装，V8引擎执行JavaScript的速度非常快，性能非常好，使得Node.js非常适合在分布式设备上运行数据密集型实时应用。
            Node.js采用事件驱动和非阻塞I/O模型，使其变得轻量和高效，非常适合构建运行在分布式设备的数据密集型的实时应用。此外，Node.js使用高效且轻量级的事件驱动、非阻塞I/O模型，使得它能够处理高并发请求，这也是它被广泛用于构建高性能、可扩展的网络应用的原因之一。 </p>
            <p><div style="color: red;">（6）ECharts</div>ECharts是一款基于JavaScript的数据可视化图表库，能够流畅地运行在PC和移动设备上，并且兼容当前绝大部分浏览器。ECharts最初由百度团队开源，并在2018年初捐赠给Apache基金会，成为ASF孵化级项目。2021年1月26日，Apache基金会宣布ECharts项目正式毕业。
            ECharts提供了一系列直观、生动、可交互、可高度个性化定制的数据可视化图表，包括折线图、柱状图、散点图、饼图、K线图等12类图表。同时，它还提供了标题、详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。</p>
            <p><div style="color: red;">（7）Django</div>Django是一个基于Python的开源Web应用框架，它遵循了MVC（Model-View-Controller）的软件设计模式，但实际上使用的是MTV（Model-Template-View）的设计模式，即模型-模板-视图。Django旨在帮助开发人员快速构建高效、可扩展的Web应用程序。它提供了许多功能和工具，包括：1.ORM（Object-Relational Mapping）: Django提供了一个强大的ORM工具，使开发人员可以使用Python代码来定义数据库模型，而无需直接编写SQL。2.Admin界面: Django自动生成了一个功能强大的管理后台界面，使开发人员可以轻松管理网站的内容和数据库。3.URL映射和视图: Django使用URL映射将请求路由到相应的视图函数，视图函数负责处理请求并返回响应。4.模板系统: Django的模板系统使开发人员能够使用HTML模板动态生成Web页面，从而实现逻辑与表现的分离。5.表单处理: Django提供了方便的表单处理功能，包括表单验证和数据清洗，使开发人员能够轻松地处理用户提交的数据。6.安全性: Django具有强大的安全性特性，包括防止常见的Web攻击（如跨站脚本攻击和SQL注入攻击）、用户认证和授权系统等。</p>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BasicIcon from '@/components/BasicIcon/index.vue';
</script>

<style scoped lang="scss">
.CEContainer {
    width: 100%;
    margin-top: 10px;
    padding-bottom: 50px;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
    .left-English, .right-Chinese {
        height: 585px;
        padding: 10px 20px;
        width: 45%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        overflow-y: scroll;
        // 隐藏滚动条
        &::-webkit-scrollbar {
            display: none;
        }
        p {
            word-wrap: break-word;
            word-break: break-all;
        }
    }
    .center-ArrowRight {
        width: 10%;
        font-size: 100px;
        animation: arrowTransition 2s infinite ease-out;
    }
}

@keyframes arrowTransition {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.1;
    }
}
</style>